<template>
	<view>
		<u-navbar back-text="返回" title="研学风采"
					:background="{background:'#2979ff'}" 
					back-icon-color="#fff" 
					title-color="#fff"
					:back-text-style="{color:'#fff'}"
		>
			<view slot="right" style="padding-right: 20rpx;">
				<u-icon name="plus" size="40" color="#fff" @click="add"></u-icon>
			</view>
		</u-navbar>
				
		<form class="flowform" @reset="reset">
			<!-- 列表 -->
			<template>
			 <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="height: calc(100vh - 5vh)">
			  <swiper-item class="swiper-item" >
			    <scroll-view scroll-y style="height: 100%;width: 100%;">
			    <!-- <view >待付款</view> -->
			    <view class="jn-grid-list margin-top-20" >
			    	<view class="jn-staff-list-cell">
			    		<uni-swipe-action>
			    			<uni-swipe-action-item v-for="(item,index) in staffs1"  :key="index" >
								
			    				<u-card :title="item.F_User"  >
			    					<template v-slot:body>
			    											
										<video
											 :src="item.F_video"
											 controls
											 width="100%"
											 height="100%" 
											 v-if="item.F_Show">
										</video>
										
										<view :v-show="item.F_Show">
											<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0" >
												<image :src="item.F_Image" mode="aspectFill" @click="creqateopen" ></image>
											</view>
										</view>
										
										
										<view >
											<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
												<view class="u-body-item-title u-line-2">{{item.F_Time}} {{item.F_Message}}</view>
											</view>
										</view>
			    					</template>
			    					<template v-slot:foot>
			    						<view class=""><u-icon name="thumb-up-fill" size="34" color="" :label="item.F_Num"></u-icon></view>
			    					</template>
			    				</u-card>
								
			    			</uni-swipe-action-item>
			    		</uni-swipe-action>
			    	</view>
			    </view>
			    			                 
			    </scroll-view>
				</swiper-item>
				</swiper>
			</template>	
			
		</form>
		<w-picker :mode="mode" :pickerList="pickerList" ref="picker" :isSearchShow="isSearchShow"></w-picker>
	    
		<!-- 日历 -->
  	    <u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
	</view>
</template>

<script>
	import jnpf from '@/common/js/jnpf.js'
	
	export default {
		data() {
			return {
				swiperCurrent:0,
				show: false,
				mode: 'date',
				datevalue: new Date().toLocaleDateString(),
				multiple: false, //多选
				selectParent: false, //父级可选
				staff: {
					fullName: '曹操',
					enCode: '2001',
					idNumber: '09:00~10:30',
					telephone: '临时有事',
					workingNature: '综合化学实验1',
					attendWorkTime: '2024-12-09 14:00:09',
					node:'有机化学实验操作课',
				},
				mode: '',
				isSearchShow:false,
				treelist: [],
				pickerList: [],
				educationList: [],
				workingNatureList: [{
						label: "综合化学实验1",
						value: "1"
					},
					{
						label: "综合化学实验2",
						value: "2"
					},
					{
						label: "化工基础实验",
						value: "3"
					}
				],
				positionNameList: [],
				departmentNameList: [],
				isId:false,
				listId:'',
				
				staffList1: [],
				list1: [
					{
						"time": "10:09:11",
						"user": "刘阿斗",
						"image": "http://180.166.193.6:90/images/study/action1.jpg",
						"video":"",
						"message":"大家专心听讲",
						"num":"15点赞",
						"show":false
					},
					{
						"time": "10:11:23",
						"user": "曹植",
						"image": "",
						"video":"http://180.166.193.6:90/images/study/aa3afda4f74eea549b6a14c7bff399d3.mp4",
						"message":"很有趣",
						"num":"125点赞",
						"show":true
					},
					{
						"time": "10:09:11",
						"user": "孙策",
						"image": "http://180.166.193.6:90/images/study/action2.jpg",
						"video":"",
						"message":"下山小路，慢慢悠悠",
						"num":"87点赞",
						"show":false
					},
					{
						"time": "10:09:11",
						"user": "小乔",
						"image": "http://180.166.193.6:90/images/study/action3.jpg",
						"video":"",
						"message":"边听边记",
						"num":"91点赞",
						"show":false
					}
				  ]
				  
			}
		},
		onLoad(e) {
			this.isId = Object.prototype.hasOwnProperty.call(e, 'id')
			this.listId = e.id
			
			this.init()
		},
		computed: {
			//预约工位内容
			staffs1: function() {
				let search = this.search;
				let staffList = this.staffList1;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			},
		},
		methods: {
			init() {
				let staff1 = this.list1;
				this.staffList1=[];
				for (let i = 0; i < staff1.length; i++) {
					this.staffList1.push({
						'F_Time'   : staff1[i].time,
						'F_User'   : staff1[i].user,
						'F_Image'  : staff1[i].image,
						'F_video'  : staff1[i].video,
						'F_Message': staff1[i].message,
						'F_Num'    : staff1[i].num,
						"F_Show"   : staff1[i].show,
						
					})
				}
			},
			open() {
				    console.log('消息提示');
			        uni.showToast({
			        	title: '删除成功',
			        	duration: 2000
			        });
			      },
			
			gender() {
				this.pickerList = this.genderList;
				this.mode = "selector";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					this.staff.gender = data.result;
					this.$eventHub.$off('popupmodality');
				});
			},
			workingNature() {
				this.pickerList = this.workingNatureList;
				this.mode = "selector";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					this.staff.workingNature = data.result;
					this.$eventHub.$off('popupmodality');
				});
			},
			education() {
				this.pickerList = this.educationList;
				this.mode = "selector";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					this.staff.education = data.result;
					this.$eventHub.$off('popupmodality');
				});
			},
			birthday() {
				this.mode = "date";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					this.staff.birthday = data.result;
					this.$eventHub.$off('popupmodality');
				});
			},
			graduationTime() {
				this.mode = "date";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					this.staff.graduationTime = data.result;
					this.$eventHub.$off('popupmodality');
				});
			},
			attendWorkTime() {
				this.mode = "date";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					this.staff.attendWorkTime = data.result;
					this.$eventHub.$off('popupmodality');
				});
			},
			submit() {
				//console.log('返回上一页成功');
				// 在某个事件或条件下触发返回上一页操作
				uni.navigateBack({
				    delta: 1, // 返回的页面数，如果是1表示返回上一级页面，可以根据需求调整
				    success: function() {
				        console.log('返回上一页成功');
				    },
				    fail: function(error) {
				        console.error('返回上一页失败', error);
				    }
				});
			},
			reset(e) {
				// console.log('清空数据')
			},
		}
	}
</script>

<style>
	page {
		background-color: #f0f2f6;
	}
</style>
